<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商网站 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <header class="bg-gray-800 text-white py-4">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center">
                <h1 class="text-2xl font-bold">电商网站</h1>
                <nav>
                    <div id="login-container" class="hidden md:flex items-center space-x-4">
                        <!-- 登录/注册链接将由JS动态填充 -->
                    </div>
                    <ul class="flex space-x-6">
                        <li><a href="index.html" class="hover:text-blue-400 transition-colors">首页</a></li>
                        <li><a href="cart.html" class="hover:text-blue-400 transition-colors">购物车 <span id="cart-count" class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">0</span></a></li>
                        <li><a href="profile.html" class="hover:text-blue-400 transition-colors">我的账户</a></li>
                    </ul>
                </nav>
                <!-- 添加搜索框 -->
                <div class="search-container">
                    <input type="text" id="search-input" placeholder="搜索商品...">
                    <button id="search-button"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <section class="banner relative mb-12 overflow-hidden rounded-lg shadow-xl">
            <div class="banner-slide active">
                <img src="images/1.jpg" alt="促销活动1" class="w-full h-[400px] object-cover">
            </div>
            <div class="banner-slide">
                <img src="images/2.jpg" alt="促销活动2" class="w-full h-[400px] object-cover">
            </div>
            <div class="banner-slide">
                <img src="images/3.jpg" alt="促销活动3" class="w-full h-[400px] object-cover">
            </div>
            <button class="banner-prev absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-black/70 transition-colors">
                <i class="fa fa-angle-left text-xl"></i>
            </button>
            <button class="banner-next absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-black/70 transition-colors">
                <i class="fa fa-angle-right text-xl"></i>
            </button>
        </section>

        <!-- 商品分类导航 -->
        <section class="product-categories mb-6">
            <h2 class="text-2xl font-bold mb-3 text-gray-800">商品分类</h2>
            <div class="category-list flex space-x-4">
                <button class="category-btn active" data-category="all">全部</button>
                <button class="category-btn" data-category="手机">手机</button>
                <button class="category-btn" data-category="平板">平板</button>
                <button class="category-btn" data-category="笔记本电脑">笔记本电脑</button>
                <button class="category-btn" data-category="手表">手表</button>
            </div>
        </section>

        <section class="products mb-12">
            <h2 class="text-2xl font-bold mb-6 text-gray-800">热门商品</h2>
            <div class="product-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="product-list">
                <!-- 商品将通过JavaScript动态加载 -->
            </div>
        </section>
    </main>

    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold mb-2">电商网站</h3>
                    <p class="text-gray-400">提供优质的购物体验</p>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-instagram"></i></a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-linkedin"></i></a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
                <p>&copy; 2023 电商网站. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 错误消息容器 -->
    <script src="js/main.js"></script>
</body>
</html>